<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站后台 - 管理系统</title>
    <meta http-equiv="pragma" content="no-cache"> 
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../index/js/ieold.js"></script>
  <![endif]-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload.full.min.js"></script>
    <style type="text/css">
        body
        {
            font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif;
        }
        #content
        {
            margin: 20px 300px auto;
        }
        .loadBar
        {
            width: 600px;
            height: 30px;
            border: 3px solid #212121;
            border-radius: 20px;
            position: relative;
        }
        .loadBar div
        {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .loadBar div span, .loadBar div i
        {
            box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);
            width: 0%;
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
        }
        .loadBar div i
        {
            width: 100%;
            -webkit-animation: move .8s linear infinite;
            background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);
            background-size: 40px 40px;
        }
        .loadBar .percentNum
        {
            position: absolute;
            top: 100%;
            right: 10%;
            padding: 1px 15px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            border: 1px solid #222;
            background-color: #222;
            color: #fff;

        }
        @-webkit-keyframes move
        {
            0%
            {
                background-position: 0 0;
            }
            100%
            {
                background-position: 40px 0;
            }
        }
        
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function LoadingBar(id)
        {
            this.loadbar = $("#" + id);
            this.percentEle = $(".percent", this.loadbar);
            this.percentNumEle = $(".percentNum", this.loadbar);
            this.max = 100;
            this.currentProgress = 0;
        }
        LoadingBar.prototype = {
            constructor: LoadingBar,
            setMax: function (maxVal)
            {
                this.max = maxVal;
            },
            setProgress: function (val)
            {
                if (val >= this.max)
                {
                    val = this.max;
                }
                this.currentProgress = parseInt((val / this.max) * 100) + "%";
                this.percentEle.width(this.currentProgress);
                this.percentNumEle.text(this.currentProgress);


            }
        };
        
        var i = 0;
       function  upload()
        {
    	   var loadbar = new LoadingBar("loadBar01");
           var max = 1000;
           loadbar.setMax(max);
            var time = setInterval(function ()
            {
                loadbar.setProgress(i);
                if (i == max)
                {
                    clearInterval(time);
                    return;
                }
            }, 40);
        }
    </script>
  </head>
<body>

<div class="navbar navbar-fixed-top">
  <div  class="navbar-inner">
    <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </a><a class="brand" style="letter-spacing:3px;" href="index.html">网站后台管理系统</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                            class="icon-cog"></i> 用户中心 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">设置</a></li>
              <li><a href="javascript:;">帮助</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                            class="icon-user"></i> 管理员 <b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="/flowboard">首页</a></li>
              <li><a href="layout">退出</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right">
          <input type="text" class="search-query" placeholder="搜索资料">
        </form>
      </div>
      <!--/.nav-collapse --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /navbar-inner --> 
</div>
<!-- /navbar -->

<div class="subnavbar">
  <div class="subnavbar-inner">
    <div class="container">
      <ul class="mainnav">
        <li ><a href="index.html"><i class="icon-dashboard"></i><span>控制面板</span> </a> </li>
        <li><a href="reports.jsp"><i class=" icon-columns"></i><span>PDF上传</span> </a> </li>
        <li ><a href="guidely.jsp"><i class=" icon-edit"></i><span>文本上传</span> </a></li>
        <li><a href="charts.jsp"><i class="  icon-file"></i><span>Word上传</span> </a> </li>
        <li class="active"><a href="shortcodes.jsp"><i class="icon-list-alt"></i><span>PPT上传</span> </a> </li>
        </ul>
    </div>
    <!-- /container --> 
  </div>
  <!-- /subnavbar-inner --> 
</div>
<!-- /subnavbar -->
    
    
<div class="main">
	<div class="main-inner">
	    <div class="container" style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
	    
	    <div id="filelist"></div>
		<button id="uploader">选择文件</button>
		<div id="progress"></div>
		<div id="result"></div>
	    
	    
		<div id="content" class="hidden">
	    <div id="loadBar01" class="loadBar">
	        <div>
	             <span class="percent">
	                <i></i>
	             </span>
	        </div>
	        <span class="percentNum">0%</span>
	    </div>
	</div>
	 </div> <!-- /container -->
    
	</div> <!-- /main-inner -->
	    
</div> <!-- /main -->
    


<div class="footer navbar-fixed-bottom" >
  <div class="footer-inner">
    <div class="container">
      <div class="row">
        <div class="span12"> &copy; 2016 <a href="/flowboard">网站后台管理系统</a>. </div>
        <!-- /span12 --> 
      </div>
      <!-- /row --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /footer-inner --> 
</div>
<!-- /footer --> 
<script src="js/base.js"></script>
<script src="js/bootstrap.js"></script>
 </body>
<script type="text/javascript">
		var uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight',//设置运行环境，会按设置的顺序，可以选择的值有html5,gears,flash,silverlight,browserplus,html
			flash_swf_url : './js/Moxie.swf',
			silverlight_xap_url : './js/Moxie.xap',
	        url : '${pageContext.request.contextPath}/manager/fileupload',//上传文件路径
            max_file_size : '20mb',//100b, 10kb, 10mb, 1gb
            chunk_size : '1mb',//分块大小，小于这个大小的不分块
            unique_names : true,//生成唯一文件名
            browse_button : 'uploader', 
            filters : [ {
                title : 'PPT files',
                extensions : 'ppt'
            }],
            init : {
				FilesAdded: function(up, files) {
					uploader.start();
					return false;
				},
                FileUploaded : function(up, file, info) {//文件上传完毕触发
                	console.log("单独文件上传完毕");
                    var response = $.parseJSON(info.response);
                    if (response.status) {
                    	$('#result').append($('<div><a href="'+response.fileUrl+'" >查看文件</a>' +'"&nbsp;文件名字为："' + file.name + '</div>'));
                    }
                },
                UploadComplete : function( uploader,files ) {
                	console.log("所有文件上传完毕");
                },
                UploadProgress : function( uploader,file ) {
                	$("#content").removeClass();
                	$("#progress").html("上传进度为：" + file.percent + "%");
                	var tt = file.percent*10; 
                	if(i==0){
                		upload();
                	}
                	i=tt;
                }
            }
        });
		uploader.init();
		$(function () {
			$('.subnavbar').find ('li').each (function (i) {
				var mod = i % 3;
				if (mod === 2) {
					$(this).addClass ('subnavbar-open-right');
				}	
			});
		});
</script>
</html>
